<template>
  <Transition name="fade">
    <div v-if="notifyConfig.show" class="notify-container">
      <ModalVue>
        <div :class="[notifyConfig.type]" class="flex flex-col notify">
          <div class="text-center text-shadow text-16 head">
            {{ notifyConfig.title || '无标题' }}
          </div>
          <div
            class="flex-1 content"
            :class="[`text-${notifyConfig.textAlign}`]"
          >
            {{ notifyConfig.content }}
          </div>
          <div class="flex footer">
            <div
              class="button cancle flex-1 text-center text-shadow"
              @click="cancle"
            >
              {{ notifyConfig.cancleText || '取消' }}
            </div>
            <div
              class="button comfirm flex-1 text-center text-shadow"
              @click="comfirm"
            >
              {{ notifyConfig.comfirmText || '确定' }}
            </div>
          </div>
        </div>
      </ModalVue>
    </div>
  </Transition>
</template>

<script setup lang="ts">
  import ModalVue from '@/views/components/modal/Modal.vue';
  import { notifyConfig } from './notify';

  const cancle = () => {
    if (notifyConfig.value.onCancle) {
      notifyConfig.value.onCancle();
    }

    notifyConfig.value.show = false;
  };
  const comfirm = () => {
    if (notifyConfig.value.onConfirm) {
      notifyConfig.value.onConfirm();
    }
    notifyConfig.value.show = false;
  };
</script>

<style lang="scss" scoped>
  @import './style';
</style>
